<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 页面布局 -->
      <el-card class="tree-card">

        <!-- 对组件封装复用 -->
        <TreeTool :is-company="false" :tree-node="company" @addEvent="addFn" />

        <!-- 树形结构 -->
        <el-tree :data="treeData" default-expand-all	:props="{label:'name'}">
          <template v-slot="{ data }">
            <TreeTool
              :tree-node="data"
              @addEvent="addFn"
              @removeEvent="removeFn"
              @editEvent="editFn"
            />
          </template>
        </el-tree>
      </el-card>

      <!-- 2.diglog布局 -->
      <!-- 父传子 -->
      <!-- <AddDept :show-dialog="showDialog" @closeEvent="showDialog=false" /> -->
      <!-- ❗关闭弹窗优化：
            vue提供了修饰符，.sync，可以直接子组件修改
            语法：
                1.父组件：传递数据添加.sync
                2.子组件：自定义事件修改
                this.$emit('update:自定义事件名', 要修改的值false)
       -->
      <AddDept
        ref="addDept"
        :show-dialog.sync="showDialog"
        :cul-dept="curDeptData"
        @updataEvent="getComponents"
      />
    </div>
  </div>
</template>

<script>
import { getComponents, delComponent } from '@/api/components'
import TreeTool from './components/tree-tool.vue'
import { listToTree } from '@/utils/index'
import AddDept from './components/add-dept.vue'
export default {
  components: {
    TreeTool,
    AddDept
  },
  data() {
    return {
      // 渲染
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人', id: '' },
      treeData: [
        {
          name: '总裁办',
          manager: '管理员'
        },
        {
          name: '技术部',
          manager: '小明',
          children: [
            {
              name: '前端研发部',
              manager: '小芳'
            },
            {
              name: 'java研发部',
              manager: '尤玉玺'
            }
          ]
        }
      ],
      // 新增
      showDialog: false, // 显示dialog
      // 接收点击的部门信息
      curDeptData: {}
    }
  },
  created() {
    // ❗❗获取部门列表需要复用，所以需要单独封装getComponents()
    this.getComponents()
  },
  methods: {
    async getComponents() {
    // 请求获取数据 渲染网页
      const res = await getComponents()
      console.log(res)
      this.company.name = res.companyName // 保存企业名称
      this.treeData = listToTree(res.depts) // 保存部门列表信息
    },
    // 新增
    // 2. 修改Dialog是否显示
    addFn(treeNode) {
      this.showDialog = true
      // 接收点击的部门信息
      this.curDeptData = treeNode
      // 点击新增调用子组件的getComponents方法
      // 使用$refs
      this.$refs.addDept.getComponents()
    },
    // 删除
    removeFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).then(async() => {
        await delComponent(id)
        this.getComponents()
      }).catch((err) => {
        console.log('删除失败或取消删除', err)
        // console.dir(err)
      })
    },
    // 编辑
    editFn(treeNode) {
      // 点击编辑
      // 显示模态框，
      // 获取当前编辑部门信息，
      // 获取所有部门信息渲染
      // this.showDialog = true
      // this.curDeptData = treeNode
      // this.$refs.addDept.getComponents()
      this.addFn(treeNode)
      this.$nextTick(() => {
        this.$refs.addDept.getDepartmentDetail(this.curDeptData.id)
      })
    }
  }

}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
